<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>cavans阴影绘制</title>
	</head>
	<!--
    	作者：zyl
    	时间：2017-05-27
    	描述：
shadowColor	属性
	 定义和用法
	shadowColor 属性设置或返回用于阴影的颜色。
	注释：请将 shadowColor 属性与 shadowBlur 属性一起使用，来创建阴影。
	提示：请通过使用 shadowOffsetX 和 shadowOffsetY 属性来调节阴影效果。
	默认值：   	#000000
	JavaScript 语法：	context.shadowColor=color;
	属性值
	值					描述
	color			用于阴影的 CSS 颜色值。默认值是 #000000。
	
shadowBlur 属性
定义和用法
	shadowBlur 			属性设置或返回阴影的模糊级数。
	默认值：					#000000
	JavaScript 语法：	context.shadowBlur=number;
	属性值
	值							描述
	number					阴影的模糊级数

shadowOffsetX 属性
定义和用法
	shadowOffsetX	 	属性设置或返回形状与阴影的水平距离。
	shadowOffsetX=0 	指示阴影位于形状的正下方。
	shadowOffsetX=20 	指示阴影位于形状 left 位置右侧的 20 像素处。
	shadowOffsetX=-20 	指示阴影位于形状 left 位置左侧的 20 像素处。
	提示：如需调整距离形状的垂直位置，请使用 shadowOffsetY 属性。
	
	默认值：	0
	JavaScript 语法：	context.shadowOffsetX=number;
	属性值
	值						描述
	number			正值或负值，定义阴影与形状的水平距离。
	
shadowOffsetY 属性
	定义和用法
	shadowOffsetY 		属性设置或返回形状与阴影的垂直距离。
	shadowOffsetY=0 	指示阴影位于形状的正下方。
	shadowOffsetY=20 	指示阴影位于形状 top 位置下方的 20 像素处。
	shadowOffsetY=-20 	指示阴影位于形状 top 位置上方的 20 像素处。
	提示：如需调整距离形状的水平位置，请使用 shadowOffsetX 属性。
	默认值：	0
	JavaScript 语法：	context.shadowOffsetY=number;
		属性值
		值						描述
		number			正值或负值，定义阴影与形状的垂直距离。
    -->
	<body>
	<canvas id="canvas" style="border: 2px solid #ccc; display: block;margin: 50px auto;">
			
		</canvas>
	</body>
	<script>
		var canvas = document.getElementById("canvas");
			canvas.width =800;
	        canvas.height =800;
			 var context = canvas.getContext("2d");//2d环境
			 
			 //图形阴影
			  context.fillStyle="bisque";
			  context.shadowColor ="gray";//阴影颜色
			  context.shadowOffsetX=50;//x坐标轴
			  context.shadowOffsetY=50;//y
			  context.shadowBlur=8;//阴影级别数值越大越模糊
			  context.fillRect(20,20,100,100);//填充矩形图形
			  
			  //文字阴影
			  context.fillStyle="red";
			  context.font="bold 120px Arial";
			  
			  context.textAlign="center";
			  context.textBaseline="middle";
			  
			  context.shadowColor="#058";
			  context.shadowOffsetX=10;
			  context.shadowOffsetY=10;
			  context.shadowBlur=5;
			  context.fillText("文字阴影",300,300);
			 
	</script>
</html>
